<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--
  ES5之前
  if for 没有作用域
  函数function()有作用域
  所以在很多时候我们都需要引入function的作用域来解决应用外部变量的问题

  ES6引入了let，它是有if和for的块级作用域的
-->

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>

<script>


  // 没有块级作用域引起的问题：for的块级
  // 为什么闭包可以解决问题，因为函数是一个作用域
  // var btns = document.getElementsByTagName('button');
  // for (var i = 0; i < btns.length; i++){
  //   (function (num) {
  //     btns[i].addEventListener('click',function () {
  //         console.log('第' + (num+1) + '个按钮被点击');
  //     })
  //   })(i)
  // }


  // ES6轻松解决问题，let使得for有自己的作用越了
  const  btn = document.getElementsByTagName('button');
  for (let i = 0; i< btn.length;i++){
    btn[i].addEventListener('click',function () {
        console.log('第' + (i+1) + '个按钮被点击')
    })
  }
</script>
</body>
</html>
